<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/easyui/css/default.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/black/easyui.css"/>
    <script src="/easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/easyui/themes/locale/easyui-lang-zh_CN.js"></script>
    <style>
        .footer{
            text-align: center;
        }
        #nav ul{
            padding: 5px;
        }
        li{
            text-align: center;
            list-style: none;
            border-bottom: 1px solid white;
        }
        a{
            text-decoration: none;
            color: white;
        }
        #nav ul li:hover{
            background-color: white;
        }
        #nav ul li a:hover{
            color: black;
        }
        #logout{
            text-decoration: none;
            color: white;
        }
        #username{
            color: red;
        }
    </style>
    <title>学生管理系统</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'学生管理系统'">
    <span style="float:right; padding-right:20px;" class="head">
        <span id="username">${username} </span>你好
        <a href="/system/logout" id="logout">退出</a>
    </span>
</div>
<div data-options="region: 'south'">
    <div class="footer">mianyangzhangsan@qq.com</div>
</div>
<div data-options="region: 'center'">
    <div id="tab" class="easyui-tabs">

    </div>
</div>
<div data-options="region: 'west', width: 180, title: '导航菜单'">
    <div id="nav">
        <div data-options="title:'学生信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="toScoreList">成绩查询</a></li>
                <li><a href="#" class="tab_btn" page="scoreStats">成绩统计</a> </li>
                <li><a href="#" class="tab_btn" page="toStudentList">学生列表</a></li>
            </ul>
        </div>
        <div data-options="title:'教师信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="toTeacherList">教师列表</a></li>
            </ul>
        </div>
        <div data-options="title:'班级信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="toClazzList">班级列表</a></li>
            </ul>
        </div>
        <div data-options="title:'课程信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="toCourseList">课程列表</a></li>
            </ul>
        </div>
        <div data-options="title:'选课信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="selectCourseList">选课列表</a></li>
            </ul>
        </div>
        <div data-options="title:'考勤信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="toAttendanceList">考勤列表</a></li>
            </ul>
        </div>
        <div data-options="title:'请假信息管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="toLeaveList">请假列表</a></li>
            </ul>
        </div>
        <div data-options="title:'系统管理'">
            <ul>
                <li><a href="#" class="tab_btn" page="modify">修改密码</a></li>
                <li><a href="#" class="tab_btn" page="welcome">系统详情</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $("#nav").accordion({
        title: "导航菜单",
        fit: true,
    });
    var as = $(".tab_btn");
    for (var i = 0; i < as.length; i++){
        //为每个a标签绑定点击事件，单击创建一个选项卡
        as[i].addEventListener("click", function(){
            var tab_ = this.text;
            var page = this.getAttribute('page');
            console.log(tab_);
            if ($("#tab").tabs('exists', tab_)){
                //当前选项卡已经打开，选中当前的选项卡
                $("#tab").tabs('selected', tab_);
            }else{
                //当前的选项卡不存在则打开一个新的选项卡
                $("#tab").tabs('add',{
                    title: tab_,
                    fit: false,
                    closable: true, //是否可以关闭
                    href: "/mainPage/" + page,
                });
            }
        });
    }
</script>
</html>